<template>
  <Layout class="template-layout">
    <!-- 内容区 -->
    <Content>
      <zz-PageBars>
        <template #buttons>
          <Button
            type="primary"
            size="default"
            @click="add"
            :loading="btnLoading"
            >新增角色</Button
          >
        </template>
      </zz-PageBars>
      <zz-Table
        ref="zzTable"
        :data="tableData"
        :hasPage="false"
        :loading="loading"
        :treeConfig="{
          rowField: 'roleId',
          parentField: 'parentId',
        }"
      >
        <vxe-column
          type="seq"
          title="序号"
          fixed="left"
          width="50"
        ></vxe-column>
        <vxe-column
          field="roleName"
          title="角色名称"
          fixed="left"
          :min-width="120"
          tree-node
        ></vxe-column>
        <vxe-column
          field="roleCode"
          title="角色编码"
          fixed="left"
          :min-width="120"
        >
        </vxe-column>
        <vxe-column field="isEffective" title="是否生效" :min-width="120">
          <template v-slot="{ row }">
            <Switch
              v-model="row.status"
              true-value="1"
              false-value="0"
              :disabled="row.disabled"
              @on-change="changeInvalid(row)"
            />
          </template>
        </vxe-column>
        <vxe-column field="status" title="状态" :min-width="120">
          <template v-slot="{ row }">
            <span
              v-if="row.status === '1'"
              style="
                display: inline-block;
                padding-right: 5px;
                padding-left: 5px;
                border-radius: 4px;
                border: 1px solid #19be6b;
                color: #19be6b;
              "
            >
              已生效
            </span>
            <span
              v-else
              style="
                display: inline-block;
                padding-right: 5px;
                padding-left: 5px;
                border-radius: 4px;
                border: 1px solid #ed4014;
                color: #ed4014;
              "
            >
              已失效
            </span>
          </template>
        </vxe-column>
        <vxe-column
          field="isManageRole"
          title="管理者"
          :min-width="120"
          :formatter="formatYesNo"
        ></vxe-column>
        <vxe-column field="creatorName" title="创建人" :min-width="120">
        </vxe-column>
        <vxe-column
          field="createDate"
          title="创建时间"
          :min-width="120"
          :formatter="formatTime"
        >
        </vxe-column>
        <vxe-column title="操作" width="250" fixed="right" align="center">
          <template v-slot="{ row }">
            <zz-TableBtn
              type="text"
              :loading="btnLoading"
              @click="dealRole(row)"
              >编辑</zz-TableBtn
            >
            <zz-TableBtn
              type="error"
              :loading="btnLoading"
              @click="deleteRole(row)"
              >删除</zz-TableBtn
            >
            <Dropdown @on-click="clickMore($event, row)" transfer>
              <zz-TableBtn type="text">
                角色授权
                <Icon type="ios-arrow-down"></Icon>
              </zz-TableBtn>
              <template #list>
                <DropdownMenu>
                  <DropdownItem name="managementPower">管理授权</DropdownItem>
                  <DropdownItem name="workPower">业务授权</DropdownItem>
                  <DropdownItem name="baseDataPower">数据权限</DropdownItem>
                  <DropdownItem name="showComponent">挂件授权</DropdownItem>
                </DropdownMenu>
              </template>
            </Dropdown>
          </template>
        </vxe-column>
      </zz-Table>
    </Content>
    <add-role ref="addRole" @query="query" :roleTree="tableData"></add-role>
    <power-role ref="powerRole"></power-role>
  </Layout>
</template>

<script>
import addRole from './components/addRole.vue'
import powerRole from './components/powerRole.vue'
export default {
  name: 'roleManagement',
  emits: ['query'],
  components: { addRole, powerRole },
  data() {
    return {
      // model
      model: {},
      // list
      // 页面显示相关
      loading: false,
      btnLoading: false,
      tableData: [],
      // 业务相关
    }
  },
  computed: {
    searchOptions() {
      return {
        // 接收字段
        model: this.model,
        // 配置表单
        column: [],
      }
    },
  },
  created() {
    this.init()
    this.query()
  },
  methods: {
    // 初始化
    init() {},
    // 查询
    async query() {
      this.loading = true
      let res = await this.$API.roleManagement.role.queryAllWithRight.get()
      if (res.code === '01') {
        // 将列表转成树

        this.tableData = this.$XEUtils.toArrayTree(res.data, { key: 'roleId' })
        this.loading = false
      } else {
        this.loading = false
      }
    },

    // 新增
    add() {
      this.$refs.addRole.modelIsOpen = true
    },
    // 删除
    deleteRole(row) {
      let roleId = row.roleId
      this.$Modal.confirm({
        title: '确认',
        content: '确定要删除吗？',
        onOk: async () => {
          let res = await this.$API.roleManagement.role.delete.get(roleId)
          if (res.code === '01') {
            this.$Message.success('删除成功')
            this.query()
          } else {
            this.$Message.error('删除失败')
          }
        },
      })
    },
    // 查看、编辑
    dealRole(row) {
      this.$refs.addRole.title = '编辑角色'
      this.$refs.addRole.model = row
      this.$refs.addRole.modelIsOpen = true
    },
    // 更改状态
    async changeInvalid(row) {
      let res = await this.$API.roleManagement.role.changeInvalid.get(
        row.roleId
      )
      if (res.code === '01') {
        this.query()
      } else {
        this.$Message.error('系统错误，请联系管理员')
        this.query()
      }
    },
    // 管理授权
    managementPower(row) {
      this.$refs.powerRole.menuType = '1'
      this.$refs.powerRole.roleItem = row
      this.$refs.powerRole.modelIsOpen = true
    },
    // 业务授权
    workPower(row) {
      this.$refs.powerRole.menuType = '2'
      this.$refs.powerRole.roleItem = row
      this.$refs.powerRole.modelIsOpen = true
    },
    // 更多
    clickMore(val, row) {
      if (val && val === 'baseDataPower') {
        this.$Message.warning('该功能未开发，敬请期待')
      } else if (val && val === 'showComponent') {
        this.$Message.warning('该功能未开发，敬请期待')
      } else if (val && val === 'managementPower') {
        this.managementPower(row)
      } else if (val && val === 'workPower') {
        this.workPower(row)
      }
    },
    // 格式化
    formatDate({ cellValue }) {
      return this.$TOOL.format.formatDate(cellValue)
    },
    formatTime({ cellValue }) {
      return this.$TOOL.format.formatTime(cellValue)
    },
    formatYesNo({ cellValue }) {
      if (cellValue === '1') {
        return '是'
      } else {
        return '否'
      }
    },
    checkMethod({ row }) {
      if (row.roleCode === 'root') {
        return false
      } else {
        return true
      }
    },
  },
}
</script>

<style></style>
